<template>
  <div class="Main">
    <div id="aa" class="a"></div>
  </div>
</template>
<script lang="ts">
export default {
  // name: "chartMain",
};
</script>
<script lang="ts" setup>
const { proxy } = getCurrentInstance() as any;
const echarts = proxy.$echarts;

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = reactive(echarts.init(document.getElementById("aa")!));
  // 绘制图表
  myChart.setOption({
    title: {
      text: "ECharts",
    },
    tooltip: {},
    xAxis: {
      name: "类型",
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {
      name: "销量",
      type: "value",
    },
    series: [
      {
        name: "销量",
        type: "bar",
        color: "red",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  });
});
const data = ref({ shuzu: [5, 20, 36, 10, 10, 20] });
// const handleChange = () => {
//   var myChart: any = reactive(
//     getInstanceByDom(document.getElementById("code")!) as any
//   );

//   // 绘制图表
//   myChart.setOption({
//     title: {
//       text: "标题",
//     },
//     series: [
//       {
//         data: data.value.shuzu,
//       },
//     ],
//   });
// };
</script>

<style scoped>
.Main {
  width: 100%;
  height: 100%;
  background: #fff;
}
.a {
  width: 100%;
  height: 99%;
}
</style>
